<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


 <link rel="stylesheet" href="http://106.12.207.1:8080/wuliucommon/css/sm.min.css">
  <link rel="stylesheet" href="http://106.12.207.1:8080/wuliucommon/css/sm-extend.min.css">
  <script type="text/javascript" src="http://106.12.207.1:8080/wuliucommon/common/common/common.js"></script>
  

  <style>

.content{
      background-color: white;
    }


    .fahuo{
      display: flex;
      justify-content: flex-start;
    }
    .mykind{
      display: flex;
      justify-content: flex-start;
    }
    .thenum{
      display: flex;
      justify-content: flex-start;
    }
    .submitLeft{
      display: flex;
      justify-content: space-between;
    }


    .theend .mysubmit{
      width: 33%;
      text-align: center;
    }
    .fifty{
      width: 50%;
    }
    .thirty-three{
      width: 33%;
    }

    .contentPadding{
      padding: 0;
      /* margin: 0; */
      margin: 0.2rem 0.2rem;
    }
    .childContent{
      margin: 0.5rem 0 0 0;
      border: solid 1px #c3bebe;
      border-radius: 2px;
      width: 100%;
      background-color: #fcfcfc;
      box-shadow: 0px 0px 1px 2px #f2efef;
    }
    .segmentation{
      padding: 0.25rem 0;
    }
    .segmentationLast{
      padding: 0.25rem 0;
    }
    .issued{
      text-align: right;
      color: red;
      font-size: 15px;
      margin-bottom: -0.4rem;
    }
    .listMargin{
      margin: 0.5rem 0;
    }
    .list-block ul{
      padding-bottom: 0.5rem;
    }

#divtop_unid{
  width:50%;
  height:42px;
  text-align: center;
  color:black;
  background-color: white;
  z-index: 1000;
}

#divtop_id{
  width:50%;
  height:42px;
  text-align: center;
  color:black;
  background-color: white;
  z-index: 1000;
}

.tab-link{
  z-index: 1000;
  background: white;
}

#li_block{
  margin: 2rem 0;
}


#searchinput{
  border: 1px solid lightgray;
  padding: 0;
  border-radius:5px;
  outline-style: none;
 }
 .search{
  padding-top:20px;
  padding-left: 12px;
  width: 100%;
  height: 60px;
  overflow: hidden;
  background-color: white;
  z-index: 2000;
  position: absolute;
  top: 30px;
 }

 .search input{
  float: left;
  width: 85%;
  text-align: center;
  color:black;
  height: 32px;
  padding-left:10px;
  color: black;
 }
 .search img{
  float: right;
  height: 30px;
  width: 30px;
  margin-right:12px;
  cursor: pointer;
 } 

  </style>
</head>
<body>
    <div class="page-group">
      <div class="page">

          <div id="div_topheader">
              <div class="buttons-tab" style="z-index: 3000">
                  <a class="tab-link button active" id="daixiada" onclick="changeMenu(0)" >待下达</a>
                  <a class="tab-link button" id="yixiada" onclick="changeMenu(1)">已下达</a>
              </div>
          </div>
        
        


              <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100" id="main">
                  <div class="list-block" id="li_block" style="font-size:15px;margin-top:100px;z-index: 1500;">
                      <ul class="list-container" >
                       
                      </ul>
                  </div>
                  <!-- 加载提示符 -->
                  <div class="infinite-scroll-preloader">
                      <div class="preloader"></div>
                  </div>
              </div>



      <div class="search">
          
          <input  type="text" placeholder="请输入关键词"  id="searchinput"> 
          <img src='http://106.12.207.1:8080/wuliucommon/img/img/img_search_icon.png' id="searchbtn" onclick="searchData()"></button>

        </div>
    </div>



  </div>

  <!-- ! 固定的js引用，所有的jQuery 要用 $$ 表示 --> 
<script type="text/javascript" src="http://106.12.207.1:8080/wuliucommon/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='http://106.12.207.1:8080/wuliucommon/zepto/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://106.12.207.1:8080/wuliucommon/js/js/sin.js' charset='utf-8'></script>
<script src="http://106.12.207.1:8080/wuliucommon/js/js/swiper/ser.js"></script>

<script type='text/javascript'>


// 加载flag
      var loading = false;
      // 最多可加载的条目
      var maxItems = 100;
      var offset = 1;
      var limit = 17;
      var datalist = new Array();
      var isdeletebottom = false;
      var ctype = 0;//默认为待下达，0：待下达  1：已下达
      var loadingdata = false;

      var pagepermission = "none";//判断当前界面的权限，登录人能看到已下达还是待下达还是全部都能看到

      // 注册'infinite'事件处理函数
      $(document).on('infinite', '.infinite-scroll-bottom',function() {
          // 如果正在加载，则退出
          if (loading) return;
          // 设置flag
          loading = true;

          // 模拟1s的加载过程
          // setTimeout(function() {
              // 重置加载flag
              
              console.log('================'+lastlength + '====' + limit);
              if (lastlength < limit) {
                  // 加载完毕，则注销无限加载事件，以防不必要的加载
                  $.detachInfiniteScroll($('.infinite-scroll'));
                  isdeletebottom = true;
                  // 删除加载提示符
                  // $('.infinite-scroll-preloader').remove();
                  return;
              }
               offset = offset + 1;
               getData();
              
      });


function changeMenu(type){
  ctype = type;
  
  offset = 1;
  $("#searchinput").val("");
  if(ctype == 0){//改变样式
    $$("#daixiada").attr("class","tab-link button active");
    $$("#yixiada").attr("class","tab-link button");
    $('.list-container').html("");
  }else{
    $$("#daixiada").attr("class","tab-link button");
    $$("#yixiada").attr("class","tab-link button active");
    $('.list-container').html("");
  }

  getData();
}



function searchData(){
  offset = 1;
  getData();
}

function getData(){

  if(isdeletebottom){
            isdeletebottom = false;
            $$("#main").append('<div class="infinite-scroll-preloader" id="placeholder"><div class="preloader"></div></div>');

            $.attachInfiniteScroll($('.infinite-scroll'))
  }

  if(ctype == 0){
    getUnfinish();
  }else if(ctype == 1){
    getFinish();
  }else{

  }
}


//获取待下达
function getUnfinish(){

  var param = {}
  var stext = encodeURI(encodeURI(encodeURI($("#searchinput").val())));
  var url = "delivery_order/wlDeliveryOrder/api/listplan"+SESSIONID+"?page_no="+offset+"&page_size="+limit+"&key="+stext;
  // // var url = 'apis/books';
  // param.page_no = offset;
  // param.page_size = limit;
  net_request('get',url,param,successCallBack1,errorCallBack);
}

//获取已下达
function getFinish(){
  var param = {}
  var stext = encodeURI(encodeURI(encodeURI($("#searchinput").val())));
  var url = "delivery_order/wlDeliveryOrder/api/list"+SESSIONID+"?page_no="+offset+"&page_size="+limit;+"&key="+stext

  net_request('get',url,param,successCallBack2,errorCallBack);
}


//成功函数回调 页面
function successCallBack1(data){
  if (isNotNull(data)) {
    var databody = data.list;
    if (offset == 1) {
      datalist = new Array();
      $('.list-container').html("");
    }
    var html = '';
    if (isNotNull(databody)) {
        
       
       lastlength = databody.length;
       for (var i = 0; i < databody.length; i++) {
          var item = databody[i];
          datalist.push(item);
      }

      for (var i = 0; i < databody.length; i++) {
            var item = databody[i];

            if (isNotNull(item)) {
              var qty_val = 0;
              if(isNotNull(item.qty)){
                  qty_val = item.qty;
              }
              var noQty = 0;
              if(item.noQty){
                noQty = (item.noQty != ".00") ? item.noQty : 0;
              }
              var chtml = `<li class="item-content" style="padding:0 0.3rem;"  data="${item.id}" onclick="tocheck(this)">
                          <div class="content-block childContent">
                            <div class="myBackground">
                              <div class="issued">
                                <span>待下达</span>
                              </div>
                              <div class="segmentation">
                                <div><span>发货日期：</span><span>${item.deliveryDate}</span></div>
                              </div>
                              <div class="segmentation">
                                  <div><span>发货库区：</span><span>${item.reservoir}</span></div>
                              </div>
                              <div class="mykind segmentation">
                                <div class="fifty"><span>类型：</span><span>${item.goodsType}</span></div>
                                <div class="fifty"><span>品牌：</span><span>${item.brand}</span></div>              
                              </div>
                              <div class="mykind segmentation">
                                  <div class="fifty"><span>规格：</span><span>${item.kind}</span></div>
                                  <div class="fifty"><span>计划数量：</span><span>${item.planQty}&nbsp;t</span></div>                  
                              </div>
                              <div class="thenum segmentation">
                                <div class="fifty"><span>下达数量：</span><span>${qty_val}&nbsp;t</span></div>
                                <div class="fifty"><span>剩余核发：</span><span>${noQty}&nbsp;t</span></div> 
                              </div>
                              <div class="submitLeft segmentation">
                                  <div class="fifty"><span>提货方式：</span><span>${item.pickup}</span></div>
                                  <div class="fifty"><span>运输方式：</span><span>${item.delivery}</span></div>
                              </div>
                              <div class="segmentation">
                                <div><span>项目：</span><span>${item.projectName}</span></div>
                              </div>
                              <div class="segmentation">
                                  <div><span>公司：</span><span>${item.companyName}</span></div>
                              </div>
                              
                            </div>
                              
                          </div>
                      </li>`;



              html += chtml;
            }           

      }
    }


    $('.list-container').append(html);
    
    if(datalist.length == 0){
      html = "";
      $('.list-container').html(html);
    }

    
    loading = false;

    if (lastlength < limit || datalist.length == 0) {
        // 加载完毕，则注销无限加载事件，以防不必要的加载
        $.detachInfiniteScroll($('.infinite-scroll'));
        // 删除加载提示符
        $('.infinite-scroll-preloader').remove();
        isdeletebottom = true;
      }

  }
}


//成功函数回调 页面
function successCallBack2(data){
  if (isNotNull(data)) {
    var databody = data.list;
    if (offset == 1) {
      datalist = new Array();
      $('.list-container').html("");
    }
    var html = '';
    if (isNotNull(databody)) {
        
       
       lastlength = databody.length;
       for (var i = 0; i < databody.length; i++) {
          var item = databody[i];
          datalist.push(item);
      }

      for (var i = 0; i < databody.length; i++) {
            var item = databody[i];

            if (isNotNull(item)) {

              var chtml = `<li class="item-content" style="padding:0 0.3rem;" data="${item.id}"  onclick="toover(this)">
                  <div class="content-block childContent">
                            <div class="myBackground">
                              <div class="issued">
                                <span>已下达</span>
                              </div>
                              <div class="segmentation">
                                <div><span>发货日期：</span><span>${item.deliveryDate}</span></div>
                              </div>
                              <div class="segmentation">
                                  <div><span>发货库区：</span><span>${item.reservoir}</span></div>
                              </div>
                              <div class="mykind segmentation">
                                <div class="fifty"><span>类型：</span><span>${item.goodsType}</span></div>
                                <div class="fifty"><span>品牌：</span><span>${item.brand}</span></div>              
                              </div>
                              <div class="mykind segmentation">
                                  <div class="fifty"><span>规格：</span><span>${item.kind}</span></div>
                                  <div class="fifty"><span>计划数量：</span><span>${item.qtyPlan}</span></div>                  
                              </div>
                              <div class="thenum segmentation">
                                <div class="fifty"><span>下达数量：</span><span>${item.qty}</span></div>
                              </div>
                              <div class="submitLeft segmentation">
                                  <div class="fifty"><span>提货方式：</span><span>${item.pickup}</span></div>
                                  <div class="fifty"><span>运输方式：</span><span>${item.delivery}</span></div>
                              </div>
                              <div class="egmentation">
                                  <div><span>执行状态：</span><span>${item.executionState}</span></div>
                              </div>
                              <div class="segmentation">
                                <div><span>项目：</span><span>${item.projectName}</span></div>
                              </div>
                              <div class="segmentation">
                                  <div><span>公司：</span><span>${item.companyName}</span></div>
                              </div>

                            </div>
                              
                          </div>
                      </li>`;



              html += chtml;
            }           
      }
    }


    $('.list-container').append(html);
    if(datalist.length == 0){
      html = "";
      $('.list-container').html(html);
    }

    

    loading = false;
    if (lastlength < limit || datalist.length == 0) {
        // 加载完毕，则注销无限加载事件，以防不必要的加载
        $.detachInfiniteScroll($('.infinite-scroll'));

        // 删除加载提示符
        $('.infinite-scroll-preloader').remove();
        isdeletebottom = true;
      }

  }
}

//失败函数
function errorCallBack(){
}


function tocheck(cthis){
  var ccid = $(cthis).attr("data");
native_goto("local/release_details?cid="+ccid+"&type=plan");
}


function toover(cthis){
  var ccid = $(cthis).attr("data");
 native_goto("local/release_details?cid="+ccid+"&type=order"); 
}

function getParams(data){
  var jodata = urlParamParseJson(data);
     if(isNotNull(jodata) && isNotNull(jodata.menupermission)){//
        pagepermission = jodata.menupermission;
        if(pagepermission == 'plan'){
          $("#div_topheader").show();
          $("#main").show();
          $("#daixiada").show();
          $("#yixiada").hide();
        }else if(pagepermission == 'order'){
          $("#div_topheader").show();
          $("#main").show();
          $("#daixiada").hide();
          $("#yixiada").show();

          ctype = 1;
          offoffset = 1;
          getData();
        }else if(pagepermission == 'all'){
          $("#div_topheader").show();
          $("#main").show();
          $("#daixiada").show();
          $("#yixiada").show();


        }else if(pagepermission == 'none'){
          $("#div_topheader").hide();
          $("#main").hide();
          $("#daixiada").hide();
          $("#yixiada").hide();
          $.alert("您没有权限");

          ctype = -1;
          offoffset = 1;
          getData();
        }else{
          $("#div_topheader").hide();
          $("#main").hide();
          $("#daixiada").hide();
          $("#yixiada").hide();
          $.alert("您没有权限");


          ctype = -1;
          offoffset = 1;
          getData();
        }
     }

}


$(function () {
    $.init();
    // 获取初步显示列表
    if(!loadingdata){
      var lasttype = localStorage.getItem("lasttype");
      if(isNotNull(lasttype)){
        ctype = lasttype;
        changeMenu(ctype);
      }
      offset = 1
      getData();
      loadingdata = true;

      localStorage.setItem("lasttype",0);
    }
    
});

</script>

</body>
</html>